<template>
  <div>
    <el-dialog
      title="添加用户"
      :visible.sync="dialogVisible"
      width="50%"
      @close="closeDialog"
    >
      <el-form :model="addUser" :rules="formRules" ref="userForm">
        <el-form-item prop="username" label="用户名">
          <el-input v-model="addUser.username"></el-input>
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input v-model="addUser.password" type="password"></el-input>
        </el-form-item>
        <el-form-item prop="email" label="邮箱">
          <el-input v-model="addUser.email"></el-input>
        </el-form-item>
        <el-form-item prop="mobile" label="手机">
          <el-input v-model="addUser.mobile"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'AddUserDialog',
  data() {
    // 自定义检验规则和匹配正则
    const emailzz = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
    const numberzz =
      /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
    const checkEmail = (rule, value, cb) => {
      if (value === '') return cb(new Error('邮箱不能为空!'))
      if (emailzz.test(value)) {
        cb()
      } else {
        cb(new Error('邮箱格式不正确!'))
      }
    }
    const checkNumber = (rule, value, cb) => {
      if (value === '') return cb(new Error('手机号码不能为空!'))
      if (numberzz.test(value)) {
        cb()
      } else {
        cb(new Error('号码格式不正确!'))
      }
    }
    return {
      // 添加用户的携带参数
      addUser: {
        username: '',
        password: '',
        email: '',
        mobile: ''
      },
      formRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 16, message: '长度在6到16个字符', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { validator: checkNumber, trigger: 'blur' }
        ],
        email: [
          { validator: checkEmail, trigger: 'blur' },
          { required: true, message: '请输入邮箱', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.$store.state.user.dialogVisible
      },
      set() {
        this.$store.commit('user/AddDialog', false)
      }
    }
  },
  methods: {
    // 对话框关闭时触发的方法
    closeDialog() {
      this.$store.commit('user/AddDialog', false)
      this.$refs.userForm.resetFields()
    },
    // 提交表单提交的用户数据
    submitForm() {
      this.$refs.userForm.validate(async (valid) => {
        if (!valid) return this.$message.error('请正确填写表单!')

        const { data: res } = await this.$http.post('users', this.addUser)

        if (res.meta.status !== 201) return this.$message.error('数据提交失败!')
        this.$refs.userForm.resetFields()
        this.$message.success('数据提交成功!')
        this.$store.commit('user/AddDialog', false, 'user')
        this.$emit('updateList')
      })
    }
  }
}
</script>

<style></style>
